<template>
  <div style="padding: 10px;">
    <a-space direction="vertical" style="width: 100%">
      <a-button type="primary" block @click="showModal(1)">
        修改签名
      </a-button>
      <a-button block @click="showModal(2)">
        修改密码
      </a-button>
      <a-button type="dashed" block @click="showModal(3)">
        修改信息
      </a-button>
      <a-button type="danger" block @click="showModal(4)">
        永久注销
      </a-button>
    </a-space>

    <ModalTemplate ref="child">
      <template v-slot:1>
        <a-space direction="vertical" style="width: 100%">
          <a-input placeholder="signature" v-model="signature"/>
          <a-button type="primary" @click="editSignature">修改</a-button>
        </a-space>
      </template>
      <template v-slot:2>
        <a-space direction="vertical" style="width: 100%">
          <a-input placeholder="password" v-model="password"/>
          <a-button type="primary" @click="editPass">修改</a-button>
        </a-space>
      </template>
      <template v-slot:3>
        <a-space direction="vertical" style="width: 100%">
          <a-input placeholder="email" v-model="email"/>
          <UploadLogo @getLogo="getLogoUrl"/>
          <a-button type="primary" @click="editInfo">修改</a-button>
        </a-space>
      </template>
      <template v-slot:4>
        <a-space direction="vertical" style="width: 100%">
          <p style="color: red">永久注销，无法找回！！！</p>
          <a-button type="primary" @click="editState">永久注销</a-button>
        </a-space>
      </template>
    </ModalTemplate>


  </div>
</template>
<script>
import {updateSignature, editPasswordByName, editUserInfo, editStatus} from "@/request/api";
import ModalTemplate from "@/components/ModalTemplate";
import UploadLogo from "@/components/UploadLogo";

export default {
  components: {
    ModalTemplate,
    UploadLogo,
  },
  computed: {
    getUsername: function () {
      return this.username
    }
  },

  data() {
    return {
      email: '',
      logoUrl: null,
      state: 0,
      password: "",
      username: localStorage.getItem("userName"),
      signature: ""
    };
  },
  methods: {
    getLogoUrl(data){
      this.logoUrl = data
    },
    editState() {
      editStatus({username: this.getUsername, state: this.state}).then(res => {
        if (res === 1) {
          this.$message.success('This is a success message');
          this.$refs.child.handleOk()
        } else {
          this.$message.error('This is an error message');
        }
      })
    },
    editInfo() {
      editUserInfo({username: this.getUsername,logo: this.logoUrl,email: this.email}).then(res => {
        if (res === 1) {
          this.$message.success('This is a success message');
          this.$refs.child.handleOk()
        } else {
          this.$message.error('This is an error message');
        }
      })
    },
    editPass() {
      editPasswordByName({username: this.getUsername, password: this.password}).then(res => {
        if (res === 1) {
          this.$message.success('This is a success message');
          this.$refs.child.handleOk()
        } else {
          this.$message.error('This is an error message');
        }
      })
    },
    editSignature() {
      updateSignature({username: this.getUsername, signature: this.signature}).then(res => {
        if (res === 1) {
          this.$message.success('This is a success message');
          this.$refs.child.handleOk()
        } else {
          this.$message.error('This is an error message');
        }
      })
    },
    showModal(choose) {
      console.log(choose)
      this.$refs.child.choose = choose
      this.$refs.child.showModal()
    }
  }
}
</script>
<style scoped>

</style>